<template>
  <div id="courseDetail">
    <img class="courseDetailBackgImage" src="../../assets/img/skillLift/stylist_back.png" alt="">
    <div class="courseDetailContetn">
      <h2 class="courseDetailContetnTitle">{{courseData.courseName}}</h2>
      <div class="courseDetailContetnApply">
        <div class="courseDetailContetnApplyLeft">
          <p>￥{{courseData.presentPrice}} <span>￥{{courseData.originalPrice}}</span></p>
        </div>
        <div class="courseDetailContetnApplyRight">
          <img src="../../assets/img/common/default.jpg" alt="" v-show="!courseData.courseImg">
          <img :src="$globalImageUrl + courseData.courseImg" alt="" v-show="courseData.courseImg" @click="jumpTo('/stylistInfo?stylistUserId=' + courseData.createId)">
          <p>主讲人: <span>{{courseData.userName}}</span></p>
          <div class="btnBox">
            <button class="btnDef" @click="fetchSkillJoinCourse()" :class="{gray: applyStatus === 1}">立刻报名</button>
          </div>
        </div>
      </div>
      <div class="courseDetailContetnIntroduce">
        <h2 class="borBtm">课程介绍
          <button class="couseDetailBtns" v-if="!isCollects" @click="onAddCollect()">收藏</button>
          <button class="couseDetailBtns btnActive" v-else @click="onAddCollect()">已收藏</button>
          <div class="worksDetailShare">
            <button>分享</button>
            <div class="worksDetailShareLargeQrcode">
              <span></span>
              <img :src="href" alt="">
            </div>
          </div>
        </h2>
        <p>{{courseData.courseDuration}}</p>
        <h2>课程内容</h2>
        <div style="padding: .2rem;" v-html="courseData.content"></div>
      </div>
      <div class="courseDetailContetnRecommend">
        <h2 class="courseDetailContetnRecommendTitle">推荐课程</h2>
        <div style="padding: .2rem;">
          <ul>
            <li v-for="(item, index) in recommendCourse" :key="index" @click="toCourseDetail(item.id)">
              <img :src="$globalImageUrl + item.courseImg" alt="">
              <div class="practicalClassroomContentCourseInfo">
                <h3 class="ellipse">{{item.courseName}}</h3>
                <p class="ellipse">{{item.introduce}}</p>
                <p class="ellipse">时长: {{item.courseDuration}}</p>
                <p style="padding-top: .1rem;">
                  <i>￥{{item.presentPrice}}</i>
                  <b>￥{{item.originalPrice}}</b>
                </p>
                <div class="btnBox">
                  <button class="btnDef">立刻报名</button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'courseDetail',
  data () {
    return {
      courseId: this.$route.query.id,
      courseData: {},
      recommendCourse: {},
      applyStatus: 0,
      isCollects: false
    }
  },
  created () {
    this.fetchSkillSameCourse()
    this.fetchSkillOneCourse()
    this.fetchSkillJoinCourseStatus()
    this.isCollect()
  },
  computed: {
    href () {
      return `https://api.qrserver.com/v1/create-qr-code?data=${encodeURIComponent(window.location.href)}`
    }
  },
  methods: {
    isCollect () {
      var userId = store.state.user.userId
      var dataId = parseInt(this.courseId)
      var collectType = 3
      console.log(userId, dataId, collectType)
      this.$api.getIsCollect({
        userId,
        dataId,
        collectType
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.isCollects = res.data
        }
      })
    },
    // 添加收藏/取消收藏
    onAddCollect () {
      var userId = store.state.user.userId
      var dataId = parseInt(this.courseId)
      if (userId == '' || userId == undefined) {
        this.$vux.toast.text('请先登录')
      }
      var collectType = 3
      if (!this.isCollects) {
        this.$api.postAddCollect({
          userId,
          dataId,
          collectType
        }).then(res => {
          if (res.code === 0) {
            this.$vux.toast.text('已收藏')
            this.isCollect()
          }
          console.log(res)
        })
      } else {
        this.$api.postDelCollect({
          userId,
          dataId,
          collectType
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$vux.toast.text('取消收藏')
            this.isCollect()
          }
        })
      }
    },
    // 
    // 跳转到课程
    toCourseDetail (id) {
      this.onOpenExternalLink(`${this.$globalLinkUrl}#/courseDetail?id=` + id)
    },
    // 获取课程详情
    fetchSkillOneCourse () {
      this.$api.getSkillOneCourse({
        id: this.courseId
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.courseData = res.data
        }
      })
    },
    // 获取推荐课程
    fetchSkillSameCourse () {
      this.$api.getSkillSameCourse({
        courseId: this.courseId
      }).then(res => {
        if (res.code === 0) {
          this.recommendCourse = res.data
        }
      })
    },
    // 检查立刻报名
    fetchSkillJoinCourseStatus () {
      this.$api.getSkillJoinCourseStatus({
        userId: this.$store.state.user.userId,
        courseId: this.courseId
      }).then(res => {
        if (res.code === 0) {
          this.applyStatus = res.data
        }
      })
    },
    // 立刻报名
    fetchSkillJoinCourse () {
      if (this.applyStatus === 1) {
        this.$vux.toast.text('您已报名')
        return
      }
      this.$api.getSkillJoinCourse({
        userId: this.$store.state.user.userId,
        courseId: this.courseId
      }).then(res => {
        if (res.code === 0) {
          this.applyStatus = 1
          this.$vux.toast.text(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #courseDetail{
    .courseDetailBackgImage{
      width: 100%;
      height: 2rem;
    }
    .courseDetailContetn{
      width: 1200px;
      margin: auto;
      padding-top: .5rem;
      margin-top: -2rem;
      .courseDetailContetnTitle{
        font-size: .4rem;
        font-weight: 500;
        color: #333;
        line-height: .54rem;
        text-align: center;
        margin-bottom: .5rem;
      }
      .courseDetailContetnApply{
        background-color: #fff;
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-bottom: .5rem;
        padding: .2rem;
        .courseDetailContetnApplyLeft{
          p{
            font-size: .2rem;
            font-weight: 500;
            color: #333;
            line-height: .5rem;
            span{
              font-size: .16rem;
              font-weight: 500;
              color: #999;
              line-height: .24rem;
              text-decoration: line-through;
            }
          }
        }
        .courseDetailContetnApplyRight{
          width: 50%;
          text-align: left;
          img{
            width: .5rem;
            height: .5rem;
            display: inline-block;
          }
          p{
            font-size: .18rem;
            font-weight: 500;
            color: #999;
            line-height: .28rem;
            display: inline-block;
            padding-left: .1rem;
            span{
              font-size: .18rem;
              font-weight: 500;
              color: #15A29C;
              line-height: .28rem;
            }
          }
          .btnBox{
            display: inline-block;
            float: right;
            button.btnDef{
              padding: 0 .2rem;
              border-radius: 0.03rem;
              font-size: .2rem;
            }
            .gray{
              background-color: #ccc;
              border: 1px solid #ccc;
            }
          }
        }
      }
      .courseDetailContetnIntroduce{
        background-color: #fff;
        margin-bottom: .5rem;
        h2{
          font-size: .2rem;
          font-weight: 500;
          color: #15A29C;
          line-height: .32rem;
          padding: .2rem;
        }
        .borBtm {
          border-bottom: 0.01rem solid #eee;
          position: relative;
        }
        p{
          font-size: .18rem;
          font-weight: 500;
          color: #333;
          line-height: .28rem;
          padding: .2rem;
        }
        .worksDetailShare:hover{
          .worksDetailShareLargeQrcode{
            opacity: 1;
            z-index: 10;
          }
        }
        .btnActive{
          color: #fff !important;
          background-color: #15A29C !important;
        }
        .couseDetailBtns{
          font-size: .16rem;
          color: #999;
          font-weight: 500;
          line-height: .3rem;
          padding: 0 .3rem;
          border: 1px solid #eee;
          background-color: #fff;
          float: right;
          outline: none;
          margin-right: 150px;
        }
        .worksDetailShare{
          position: absolute;
          right: .2rem;
          top: 50%;
          transform: translateY(-50%);
          button{
            font-size: .16rem;
            color: #999;
            font-weight: 500;
            line-height: .3rem;
            padding: 0 .3rem;
            border: 1px solid #eee;
            background-color: #fff;
            float: right;
            outline: none;
          }
          img.worksDetailShareThumb{
            width: .4rem;
            height: .4rem;
          }
          .worksDetailShareLargeQrcode {
            position: absolute;
            top: 140%;
            right: 50%;
            transform: translateX(50%);
            box-shadow: 0 0 .1rem #eee;
            opacity: 0;
            z-index: -2;
            transition: all ease .5s;
            padding: .15rem;
            background-color: #fff;
            span{
              display: inline-block;
              width: .15rem;
              height: .15rem;
              position: absolute;
              top: -.075rem;
              right: 50%;
              transform: translateX(50%) rotate(45deg);
              z-index: -1;
              background-color: #fff;
              box-shadow: 0 0 .1rem #eee;
            }
          }
        }
      }
      .courseDetailContetnRecommend{
        background-color: #fff;
        .courseDetailContetnRecommendTitle {
          font-size: .2rem;
          font-weight: 500;
          color: #15A29C;
          line-height: .32rem;
          padding: .2rem;
          border-bottom: 0.01rem solid #eee;
        }
        ul{
          li:nth-child(5n){
            margin-right: 0;
          }
          li{
            display: inline-block;
            margin-right: .125rem;
            margin-bottom: .125rem;
            box-shadow: 0 0 10px #eee;
            img{
              display: inline-block;
              width: 2.22rem;
              height: 1.5rem;
            }
            .practicalClassroomContentCourseInfo{
              padding: .1rem;
              position: relative;
            }
            h3{
              font-weight: 500;
              color: #333;
              font-size: .16rem;
              line-height: .24rem;
            }
            p{
              font-weight: 500;
              color: #666;
              font-size: .14rem;
              line-height: .22rem;
              i{
                font-weight: 500;
                color: red;
                font-size: .14rem;
                line-height: .22rem;
                font-style: normal;
              }
              b{
                text-decoration: line-through;
                font-weight: 500;
                color: #999;
                font-size: .14rem;
                line-height: .22rem;
                padding-left: .05rem;
              }
            }
            .btnBox{
              display: inline-block;
              float: right;
              position: absolute;
              right: .1rem;
              bottom: .1rem;
              .btnDef{
                font-size: .14rem;
                line-height: .25rem;
                padding: 0 .05rem;
              }
            }
          }
        }
      }
    }
  }
</style>
